<template>
  <div>
    <Yq-header :needBack="true">
      <p slot="content" style="margin-left: -12px">会员中心</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <flexbox :gutter="0" style="padding: 10px 15px;">
        <flexbox-item :span="2.5"><div class="flex-demo">
          <img :src=user.avatar id="userImg">
        </div></flexbox-item>
        <flexbox-item :span="5"><div class="flex-demo" style="text-align: left;padding-left: 30px;">
          <span style="font-size: 15px;color: #636363">{{user.nick}}</span>
          <button id="vipMark">VIP</button>
          <p style="font-size: 13px;color: #636363"><span>{{user.vipExpiretime}}</span>到期</p>
        </div></flexbox-item>
        <flexbox-item><div class="flex-demo">
          <x-button type="mini" style="background: #f95320;" @click.native="goMember">续费</x-button>
        </div></flexbox-item>
      </flexbox>
    </group>
    <group title="会员权益">
      <ul style="font-size: 15px;padding: 10px 5px 10px 15px;list-style: none;color: #666">
        <li style="padding: 0 0 5px 0">1、电话医生提供的7×24小时专业健康咨询服务</li>
        <li style="padding: 0 0 5px 0">2、预约挂号服务覆盖川内300多家知名医院，轻松预约，挂号不难</li>
        <li style="padding: 0 0 5px 0">3、专业陪诊服务，让就医过程更从容，省时省力省心</li>
        <li style="padding: 0 0 5px 0">4、享受全场数百种中老年适用商品9折会员优惠，及全场包邮特权（新疆，西藏，内蒙古，青海，海南，宁夏，港澳台地区除外）</li>
        <li style="padding: 0 0 5px 0">5、会员在孝心商城消费，专享高额消费返利，积分基准返点比例为商品支付金额的100%</li>
        <li style="padding: 0 0 5px 0">6、独享积分转入余额权益，积分兑现比例为：20积分兑现1元，余额可用于孝心商城全额消费</li>
      </ul>
    </group>
  </div>
</template>

<script>
  import { Group, Cell, XButton, Flexbox, FlexboxItem, Checker, CheckerItem } from 'vux'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      Flexbox,
      FlexboxItem,
      Checker,
      CheckerItem,
      YqHeader
    },
    data () {
      return {
        user: {
          avatar: '',
          nick: '',
          vipExpiretime: ''
        }
      }
    },
    methods: {
      goMember () {
        window.sessionStorage.setItem('xufei', 'true')
        let userId = window.sessionStorage.getItem('userId')
        window.location.href = '/api/wxAuth/go/member+GetMember_userId=' + userId
      },
      weixinfn24 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.user = this.$store.state.userInfo
      this.weixinfn24()
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    text-align: center;
    background-clip: padding-box;
  }
  #userImg{
    width: 68px;
    border-radius: 50%;
  }
  #vipMark{
    border: none;
    outline: none;
    background: #ff9000;
    color: white;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 10px;
  }
</style>
